<sqx-title [message]="schema.displayName" [url]="['..']" />
<form [formGroup]="contentForm.form" (ngSubmit)="saveAndPublish('Edit')">
    <sqx-layout [hideSidebar]="!content" layout="main">
        <ng-container title>
            <div class="d-flex align-items-center">
                @if (schema.type !== "Singleton") {
                    <a class="btn btn-text-secondary" aria-labelledby="content-back" (click)="back()">
                        <span id="content-back" hidden>{{ "common.back" | sqxTranslate }}</span> <i class="icon-angle-left"></i>
                    </a>
                }

                @if (content) {
                    <sqx-title message="i18n:contents.editPageTitle" />
                } @else {
                    <h3>{{ "contents.createTitle" | sqxTranslate }}</h3>
                    <sqx-title message="i18n:contents.createPageTitle" />
                }

                @if (content && contentTab | async; as tab) {
                    <ul class="nav nav-tabs2">
                        <li class="nav-item">
                            <a class="nav-link" [class.active]="tab === 'editor'" [queryParams]="{ tab: 'editor' }" [routerLink]="[]">
                                {{ "contents.contentTab.editor" | sqxTranslate }}
                            </a>
                        </li>

                        <li>
                            <a class="nav-link" [class.active]="tab === 'references'" [queryParams]="{ tab: 'references' }" [routerLink]="[]">
                                {{ "contents.contentTab.references" | sqxTranslate }}
                            </a>
                        </li>

                        <li>
                            <a class="nav-link" [class.active]="tab === 'referencing'" [queryParams]="{ tab: 'referencing' }" [routerLink]="[]">
                                {{ "contents.contentTab.referencing" | sqxTranslate }}
                            </a>
                        </li>

                        <li>
                            <a class="nav-link" [class.active]="tab === 'inspect'" [queryParams]="{ tab: 'inspect' }" [routerLink]="[]">
                                {{ "contents.contentTab.inspect" | sqxTranslate }}
                            </a>
                        </li>

                        @if (schema.properties.contentEditorUrl) {
                            <li>
                                <a class="nav-link" [class.active]="tab === 'extension'" [queryParams]="{ tab: 'extension' }" [routerLink]="[]">
                                    {{ "common.extension" | sqxTranslate }}
                                </a>
                            </li>
                        }
                    </ul>
                }
            </div>
        </ng-container>
        <ng-container menu>
            <div class="menu">
                @if (content) {
                    <sqx-watching-users />
                    <sqx-notifo topic="apps/{{ contentsState.appId }}/schemas/{{ schema.id }}/contents/{{ content.id }}" />
                    <sqx-language-selector
                        class="languages-buttons"
                        [language]="language"
                        (languageChange)="changeLanguage($event)"
                        [languages]="languages"
                        [percents]="contentForm.translationStatus | async" />
                    @if (content.canDelete && schema.type !== "Singleton") {
                        <button
                            class="btn btn-outline-secondary ms-2"
                            #buttonOptions
                            attr.aria-label="{{ 'common.options' | sqxTranslate }}"
                            (click)="dropdown.toggle()"
                            type="button">
                            <i class="icon-dots"></i>
                        </button>
                        <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
                            <a
                                class="dropdown-item dropdown-item-delete"
                                confirmRememberKey="deleteContent"
                                confirmText="i18n:contents.deleteConfirmText"
                                confirmTitle="i18n:contents.deleteConfirmTitle"
                                (sqxConfirmClick)="delete()">
                                {{ "common.delete" | sqxTranslate }}
                            </a>
                        </sqx-dropdown-menu>
                    }

                    @if (contentTab | async; as tab) {
                        <sqx-toolbar />
                        @if (tab === "editor") {
                            <sqx-preview-button [confirm]="confirmPreview" [content]="content" [schema]="schema" />
                            @if (content.canUpdate) {
                                <button class="btn btn-primary ms-2" shortcut="CTRL + SHIFT + S" sqxTourStep="saveContent" type="submit">
                                    {{ "common.save" | sqxTranslate }}
                                </button>
                            }
                        }
                    }
                } @else {
                    <button class="btn btn-more btn-outline-secondary btn-sm me-2" (click)="changeShowIdInput(!showIdInput)" type="button">
                        <span [class.hidden]="showIdInput">+</span> <span [class.hidden]="!showIdInput">-</span>
                    </button>
                    <sqx-language-selector
                        class="languages-buttons"
                        [language]="language"
                        (languageChange)="changeLanguage($event)"
                        [languages]="languages"
                        [percents]="contentForm.translationStatus | async" />
                    <div sqxTourStep="saveContent">
                        @if (contentsState.canCreate | async) {
                            <div class="btn-group ms-2" attr.aria-label="{{ 'common.save' | sqxTranslate }}" role="group">
                                <button class="btn btn-primary" (click)="saveAsDraft('Edit')" type="button">
                                    {{ "common.save" | sqxTranslate }}
                                </button>
                                <button
                                    class="btn btn-primary"
                                    #buttonSave
                                    attr.aria-label="{{ 'common.more' | sqxTranslate }}"
                                    (click)="saveOnlyDropdown.toggle()"
                                    type="button">
                                    <i class="icon-angle-down"></i>
                                </button>
                                <sqx-dropdown-menu
                                    position="bottom-end"
                                    scrollY="true"
                                    [sqxAnchoredTo]="buttonSave"
                                    *sqxModal="saveOnlyDropdown; closeAlways: true">
                                    <a class="dropdown-item" (click)="saveAsDraft('Add')"> {{ "common.saveAdd" | sqxTranslate }} </a>
                                    <a class="dropdown-item" (click)="saveAsDraft('Close')"> {{ "common.saveClose" | sqxTranslate }} </a>
                                </sqx-dropdown-menu>
                            </div>
                        }

                        @if (contentsState.canCreateAndPublish | async) {
                            <div class="btn-group ms-2" attr.aria-label="{{ 'contents.saveAndPublish' | sqxTranslate }}" role="group">
                                <button class="btn btn-success" shortcut="CTRL + SHIFT + S" type="submit">
                                    {{ "contents.saveAndPublish" | sqxTranslate }}
                                </button>
                                <button
                                    class="btn btn-success"
                                    #buttonSave
                                    attr.aria-label="{{ 'common.more' | sqxTranslate }}"
                                    (click)="savePublishDropdown.toggle()"
                                    type="button">
                                    <i class="icon-angle-down"></i>
                                </button>
                                <sqx-dropdown-menu
                                    position="bottom-end"
                                    scrollY="true"
                                    [sqxAnchoredTo]="buttonSave"
                                    *sqxModal="savePublishDropdown; closeAlways: true">
                                    <a class="dropdown-item" (click)="saveAndPublish('Add')">
                                        {{ "contents.saveAndPublishAdd" | sqxTranslate }}
                                    </a>
                                    <a class="dropdown-item" (click)="saveAndPublish('Close')">
                                        {{ "contents.saveAndPublishClose" | sqxTranslate }}
                                    </a>
                                </sqx-dropdown-menu>
                            </div>
                        }
                    </div>
                }
            </div>
        </ng-container>
        <ng-container>
            @if (content) {
                @switch (contentTab | async) {
                    @case ("references") {
                        <sqx-content-references [content]="content" [language]="language" [languages]="languages" mode="references" />
                    }

                    @case ("referencing") {
                        <sqx-content-references [content]="content" [language]="language" [languages]="languages" mode="referencing" />
                    }

                    @case ("inspect") {
                        <sqx-content-inspection [appName]="contentsState.appName" [content]="content" [language]="language" [languages]="languages" />
                    }

                    @case ("extension") {
                        @if (schema.properties.contentEditorUrl && content) {
                            <sqx-content-extension
                                [contentItem]="content"
                                [contentSchema]="schema"
                                [editorUrl]="schema.properties.contentEditorUrl"
                                mode="referencing" />
                        }
                    }
                }
            }

            @if (!content || (contentTab | async) === "editor") {
                <sqx-content-editor
                    [contentForm]="contentForm"
                    [contentFormCompare]="contentFormCompare"
                    [(contentId)]="contentId"
                    [contentVersion]="contentVersion"
                    [formContext]="formContext"
                    [isDeleted]="content?.isDeleted"
                    [isNew]="!content"
                    [language]="language"
                    (languageChange)="language = $event"
                    [languages]="languages"
                    (loadLatest)="loadLatest()"
                    [schema]="schema"
                    [showIdInput]="showIdInput" />
            }
        </ng-container>
        <ng-template sidebarMenu>
            <div class="panel-nav">
                <a
                    class="panel-link"
                    #linkHistory
                    attr.aria-label="{{ 'common.workflow' | sqxTranslate }}"
                    queryParamsHandling="preserve"
                    replaceUrl="true"
                    routerLink="history"
                    routerLinkActive="active"
                    sqxTourStep="history"
                    title="i18n:common.workflow"
                    titlePosition="left">
                    <i class="icon-time"></i>
                </a>
                <a
                    class="panel-link"
                    attr.aria-label="{{ 'common.comments' | sqxTranslate }}"
                    hintAfter="120000"
                    hintText="i18n:common.sidebarTour"
                    queryParamsHandling="preserve"
                    replaceUrl="true"
                    routerLink="comments"
                    routerLinkActive="active"
                    sqxTourStep="comments"
                    title="i18n:common.comments"
                    titlePosition="left">
                    <i class="icon-comments"></i>
                </a>
                @if (schema.properties.contentSidebarUrl) {
                    <a
                        class="panel-link"
                        attr.aria-label="{{ 'common.sidebar' | sqxTranslate }}"
                        queryParamsHandling="preserve"
                        replaceUrl="true"
                        routerLink="sidebar"
                        routerLinkActive="active"
                        sqxTourStep="plugin"
                        title="i18n:common.sidebar"
                        titlePosition="left">
                        <i class="icon-plugin"></i>
                    </a>
                }
            </div>
        </ng-template>
    </sqx-layout>
</form>
<router-outlet></router-outlet>
